<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>bs4-dropdown</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.bundle.js"></script>
</head>

<body>
  <div class="d-flex">
    <div class="dropdown mr-1">
      <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false" data-offset="10,20">
        Offset
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset" data-stopPropagation="true">
        <a class="dropdown-item" href="#" data-stopPropagation="true">Action</a>
        <a class="dropdown-item" href="#" data-stopPropagation="true">Another action</a>
        <a class="dropdown-item" href="#" data-stopPropagation="true">Something else here</a>
      </div>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-secondary">Reference</button>
      <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
      </div>
    </div>
  </div>
</body>

</html>